<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css" />
		<script src="js/jquery2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.mobile-1.4.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/*.main-center{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				position: relative;
			}*/
			
			.ui-content {
				position: relative;
			}
			
			.spinner {
				font-size: 20px;
				width: 10em;
				height: 10em;
				border-radius: 50%;
				box-shadow: inset 0 0 0 1em rgba(58, 168, 237, .2);
				margin: 0 auto;
				margin-bottom: 5rem;
			}
			
			.content-text {
				position: relative;
				top: 4.5em;
				text-align: center;
			}
			
			.spinner i {
				position: absolute;
				clip: rect(0, 10em, 10em, 5em);
				width: 10em;
				height: 10em;
				animation: spinner-circle-clipper 1s ease-in-out infinite;
				display: none;
			}
			
			@keyframes spinner-circle-clipper {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(180deg);
				}
			}
			
			.spinner i:after {
				position: absolute;
				clip: rect(0, 10em, 10em, 5em);
				width: 10em;
				height: 10em;
				content: '';
				animation: spinner-circle 1s ease-in-out infinite;
				border-radius: 50%;
				box-shadow: inset 0 0 0 1em #3aa8ed;
			}
			
			@keyframes spinner-circle {
				0% {
					transform: rotate(-180deg);
				}
				100% {
					transform: rotate(180deg);
				}
			}
		</style>
	</head>

	<body>
		<div data-role="header" data-position="fixed" data-position="inline">
			<h1>抽学号系统</h1>
		</div>
		<div data-role="main" class="ui-content">
			<h1 class="content-text">0</h1>
			<div class="spinner"><i></i></div>
			<form class="">
				<input type="number" class="" id="test" placeholder="请输入人数" oninput='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")' />
				<button type="button" onclick="start()" id="startClick">开始抽人</button>
			</form>
		</div>
		<script type="text/javascript">
			/*var test = $("#test"); //获取input元素
						if(test.length > 0) { //先判断元素是否存在
							if(test.val() === '') {
								$("#startClick").attr('disabled', true); //设置disabled属性为false，按钮不可用
							} else {
								$("#startClick").attr('disabled', false); //设置disabled属性为false，按钮可用
							}
						};*/
			/*$(function() {
				if($("#test").val() == "") {
					$("#startClick").attr('disabled', true); //设置disabled属性为false，按钮不可用
				} else{
					$("#startClick").attr('disabled', false); //设置disabled属性为false，按钮可用
				}
			});*/
			
			function start() {
				/*var div1 = document.getElementById(".spinner i:after");
				console.log(div1)
				div1.style.display = "block";
				alert('hello');*/
				/*$(".spinner i:after").css("display","block");*/
				if($("#test").val() == ""){
					alert("请输入数字");
					return;
				}
				$(".spinner i").css("display", "block");
				$(function() {
					setTimeout(function() {
						$(".spinner i").css("display", "none");
					}, 2000);
					/*$(".content-text").css("display", "block");*/
				})
				number = $("#test").val();
				var x = number; //最大       
				var y = 0; //最小     			
				var rand = parseInt(Math.random() * (x - y + 1) + y);
				$(".content-text").text(rand);
			}
		</script>
	</body>

</html>